<template>
  <div class="app-container">
    <el-row>
      <div style="padding: 1% 0%;background:#FED966;color: red;">
        <label id="mydate">
          <template>
            <el-input v-model="date" class="mydate"></el-input>
          </template>
        </label>
      </div>
    </el-row>

  <el-table ref="multipleTable" :data="list" :summary-method="getSummaries"  show-summary
            v-loading="listLoading" element-loading-text="Loading" border fit highlight-current-row>
    <el-table-column label="优惠码">
      <template slot-scope="scope">
        {{scope.row.coupon}}
      </template>
    </el-table-column>
    <el-table-column label="00:00至09:00">
      <template slot-scope="scope">
        {{scope.row.zero }}
      </template>
    </el-table-column>
    <el-table-column label="09:00至12:00">
      <template slot-scope="scope">
        {{scope.row.nine}}
      </template>
    </el-table-column>
    <el-table-column label="12:00至16:00">
      <template slot-scope="scope">
        {{scope.row.twelve}}
      </template>
    </el-table-column>
    <el-table-column label="16:00至18:30">
      <template slot-scope="scope">
        {{scope.row.sixteen}}
      </template>
    </el-table-column>
    <el-table-column label="18:30至00:00">
      <template slot-scope="scope">
        {{scope.row.eighteen}}
      </template>
    </el-table-column>
    <el-table-column label="合计">
      <template slot-scope="scope">
        {{scope.row.sum}}
      </template>
    </el-table-column>
  </el-table>
    <!--<div  style="padding: 1% 0%;text-align: right;background:#FED966; ">
      <label>总计</label>
      <label style="margin-right: 2%;" id="total">0</label>
    </div>-->
    <el-button type="primary" size="mini" @click="prevDay()">前一天</el-button>
    <el-button type="primary" size="mini" @click="nextDay()">后一天</el-button>
  </div>
</template>

<script>
  import { sale } from '@/api/sale'
  export default {
    data() {
      return {
        name: 'Sales',
        date: sale.addDate(new Date(), '0'),
        list: [],
        sumTotal: ''
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      fetchData() {
        this.listLoading = true
        sale.getList(this.date).then(response => {
          this.list = response.data.length == 0 ? [] : response.data
          this.listLoading = false
          this.sumTotal = response.message.substring(response.message.indexOf('计') + 1, response.message.length)
          const my = document.getElementById('mydate')
          my.text = this.date
        }, err => {
          console.log(err)
        })
      },
      getSummaries(param) {
        const { columns, data } = param
        const sums = []
        columns.forEach((column, index) => {
          sums[0] = '汇总'
          sums[6] = this.sumTotal
        })
        return sums
      },
      prevDay() {
        this.date = sale.addDate(this.date, -1)
        this.fetchData()
      },
      nextDay() {
        if (new Date(sale.addDate(this.date, 1)).getTime() > new Date().getTime()) {
          this.$message({ message: '最高日期不能超过今天.', type: 'warning' })
          return
        }
        this.date = sale.addDate(this.date, 1)
        this.fetchData()
      }
    }
  }
</script>

<style>
  .el-input__inner{background: none ;border: none;color: red;}
</style>
